<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>HR端查看签到列表</title>
		<script src="../../script/jquery.min.js" type="text/javascript"></script>
		<script src="../../script/mui.min.js"></script>
		<script type="text/javascript" src="../../script/echarts.min.js"></script>
		<script src="../../script/timecontrol.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/timecontrol.min.css"/>
		<script src="../../script/common.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet"/>
		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			.date {
				display: inline-block;
				width: 50%;
			}
			input[type=text] {
				display: inline-block;
				width: 50%;
				border: none;
				color: #646464;
			}
			.selectClass .wraptop {
				position: relative;
				width: 100%;
				background: #fff;
				z-index: 99;
			}
			.selectClass .dropdown {
				top: 10px;
				left: 50%;
				width: 70%;
				height: 40px;
				border: 1px solid #d9d9d9;
				margin: 10px 20px;
				line-height: 40px;
			}
			.selectClass .sanjiao {
				display: inline-block;
				width: 40px;
				height: 100%;
				float: right;
				border-left: 1px solid #d9d9d9;
				position: relative;
			}
			.selectClass .sanjiao img {
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
			}
			.selectClass .className {
				text-indent: 20px;
			}
			.selectClass .droplist {
				position: absolute;
				width: 71%;
				left: 53px;
				/*bottom: 0px;*/
				/*right: 0px;*/
				top: 50px;
				border-radius: 0px;
				opacity: 1;
				z-index: 999;
			}
			.selectClass .span1 {
				margin-top: 19px;
			}
			.mui-btn-blue, .mui-btn-primary, input[type=submit] {
				color: #fff;
				background-color: #FF9900;
				border: 1px solid #FF9900;
			}
			.hide-class{
				display: none;
			}
		.competition-top-tag {
			    background-size: 30px;
				background-image: url(../../image/icon_screen_hr.png);
				background-position: center left;
				background-repeat: no-repeat;
				padding-left: 34px;
				font-size: 14px;
				color: #000000;
				line-height: 30px;
				
			}
			#classificationDivId{
			  padding-left: 15px;
			  padding-right: 10px;        
			  padding-top: 10px;
			  padding-bottom: 10px;
			  background-color: #fff
			}
.detailsBtn {
    text-align: right;
    padding-right: 20px;
    }
		</style>
	</head>
	<body>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;"> <img class="mui-media-object mui-pull-left " src="../../image/icon_zhong.png" >
				<div data-role="fieldcontain" class="timecontrol " id=""  >
					<input type="text" id="time" class="timeipt" />
				</div> </a>
			</li>
		</ul>
		   <div  id="classificationDivId">
			<div class="competition-top-tag"  id="classificationId" >
			选择:全部
			</div>
			</div>
		
		<div >
	
			<div class="noSign" hidden="hidden" id="noData">
				<img src="../../image/icon_img.png" width="60%">
				<p class="font16 top_15 base_dark_grey" >
					暂无数据
				</p>
			</div>
			<div class="loadFailure" hidden="hidden" id="noNet">
				<img src="../../image/icon_img01.png" width="60%">
				<p class="" >
					数据加载失败
				</p>
				<p>
					请检查您的网络
				</p>
				<button type="button" class="mui-btn mui-btn-outlined" onclick="loadClassData()">
					重新加载
				</button>
			</div>
		</div>
		
		<div id="sgin_chart_detail">
			<div id="sginchart" >
				<div class="statistical">
					<div id="main" style="width:100%; height:320px"></div>
				</div>
				<div class="statistical">
					<div id="emoji_chart" style="width:100%; height:320px"></div>
				</div>
				<!-- <div   id="numper" class="number">
				<p>
				<span class="color_98cb00"></span>75位学生已签到
				</p>
				<p>
				<span class="color_61cbfe"></span>25位学生已签到
				</p>
				</div> -->
				<div class="detailsBtn">
					<button  id="toSginDetail" type="button" class="mui-btn mui-btn-primary" >
						查看详情
					</button>
					<p>
						注：仅统计实习中的学生
					</p>
				</div>
			</div>
			<!--<div id="sgindetail" hidden="hidden">-->
			<!-- <div class="numberDetails">
			<div class="number-title">签到人员状态</div>
			<table id="sginDetailList" class="my-table">
			<tr class="th">
			<td>姓名</td>
			<td>状态</td>
			</tr>
			<tr class="yqd">
			<td>张三</td>
			<td>已签到</td>
			</tr>
			<tr class="yqd">
			<td>李四</td>
			<td>已签到</td>
			</tr>
			<tr class="wqd">
			<td>王五</td>
			<td>未签到</td>
			</tr>
			<tr class="wqd">
			<td>王五</td>
			<td>未签到</td>
			</tr>
			</table>
			</div>-->
			<!--   <div class="detailsBtn">
			<button id="toSginBingTu" type="button" class="mui-btn mui-btn-primary" onclick="">
			查看图表
			</button>
			<p>
			注：仅统计实习中的学生
			</p>
			</div>-->
			<!--</div>-->
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script src="../../script/timecontrol.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<!--  <script type="text/javascript" src="../../script/databaseOperation.js"></script> -->
	<script>
		var currentClassid = "";
		var currentClassName = "";
		var currentClassData = new Object();
		var categoryIsShow = false;
		 var cid = '';//企业id
		 var gid = '';//岗位id
		apiready = function() {
			setupTimeControl();
			setupDetailClick();
			loadClassData();
		
			 setupNotifi();
			 onSelectCategoryClick();
		}
		
		function setupDetailClick(){
			$('#toSginDetail').click(function() {
				SendBehaviorTrajectoriesNotifi1('1', '老师端签到列表', '099', api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname, document.title);
				api.openWin({useWKWebView:true,
					name : 'HRcheckSignDetail',
					url : 'HRcheckSignDetail.html',
					//					pageParam : currentClassData
					pageParam : {
						sourceurl : api.pageParam.sourceurl,
						sourcetitle : api.pageParam.sourcetitle,
						currentClassid : currentClassid,
						currentClassName : currentClassName
					}
				});
			
			});
			
		}

	
		
		function setupEmojiChart(chartData){
			var myChart = echarts.init(document.getElementById('emoji_chart'));
			option = {
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b}: {c} ({d}%)"
				},
//				legend : {
//					orient : 'vertical',
//					x : 'left',
//					borderRadius : 4,
//					itemWidth : 12,
//					itemHeight : 12,
//					data : ['高兴', '愤怒', '忧虑', '普通', '难过']
//				},
				series : [{
					name : '心情分布',
					type : 'pie',
					radius : ['50%', '70%'],
					avoidLabelOverlap : false,
					label : {
						normal : {
							show : false,
							position : 'center'
						},
						emphasis : {
							show : true,
							textStyle : {
								fontSize : '30',
								fontWeight : 'bold'
							}
						}
					},
					labelLine : {
						normal : {
							show : false
						}
					},
					data : [{
						value : chartData.gaoxing,
						name : '高兴'
					}, {
						value : chartData.fennu,
						name : '愤怒'
					},{
						value : chartData.youlv,
						name : '忧虑'
					}, {
						value : chartData.putong,
						name : '普通'
					},{
						value : chartData.nanguo,
						name : '难过'
					}]
				}]
			};
			myChart.setOption(option);
		}
		function setupChart() {
//		alert(currentClassData.classspersonnum);
			var stuNum = parseInt(currentClassData.personnum);
			var sginNum = parseInt(currentClassData.sginnum);
			var unsginNum = stuNum - sginNum;
			var myChart = echarts.init(document.getElementById('main'));
			option = {
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b}: {c} ({d}%)"
				},
//				legend : {
//					orient : 'vertical',
//					x : 'left',
//					borderRadius : 4,
//					itemWidth : 12,
//					itemHeight : 12,
//					data : ['签到', '未签到']
//				},
				series : [{
					name : '签到人数',
					type : 'pie',
					radius : ['50%', '70%'],
					avoidLabelOverlap : false,
					label : {
						normal : {
							show : false,
							position : 'center'
						},
						emphasis : {
							show : true,
							textStyle : {
								fontSize : '30',
								fontWeight : 'bold'
							}
						}
					},
					labelLine : {
						normal : {
							show : false
						}
					},
					data : [{
						value : sginNum,
						name : '签到',
						itemStyle : {
							normal : {
								color : '#ff9900'
							}
						}
					}, {
						value : unsginNum,
						name : '未签到'
					}]
				}]
			};
			myChart.setOption(option);
		}


		function setupTimeControl() {
	
		  
			var currenttime = new currentTime();
			//当前时间   currenttime.currentDate当前日期 currenttime.currentTime当前时间  currenttime.currentDatetime当前日期时间
			var curr = currenttime.year
			function init() {
				// 如需修改类型 date是年月日 time是24小时时间 datetime是时期和时间
				$('#time').mobiscroll().date({
					dateFormat : 'yyyy-mm-dd',
					lang : 'zh',
					startYear : curr, //开始年份
					endYear : curr + 1//结束年份
				});
				
			}

			init();
			// 时间控件
			$("#time").val(currenttime.currentDate);
			
			
			$("#time").change(function() {
		
			 		api.setFrameAttr({
				    name: 'CourseCategoryWind',
				    hidden: true
				});
				categoryIsShow = false;
				var setDate = $("#time").val();
				var d = new Date(Date.parse(setDate.replace(/-/g, "/")));
				var curDate = new Date();
				if (d > curDate) {
					api.toast({
						msg : '请选择正确的日期！'
					});
					$("#time").val(currenttime.currentDate)
				}
				$('#sginchart').show();
				loadClassData();
			})
		}

		function timeStampWithString(timeString) {
			var tempStr = timeString.replace(/-/g, '/');
			var newTime = new Date(tempStr);
			return newTime.getTime() / 1000;
		}

	
		function loadClassData() {
			postprogress();
			var sgintime = timeStampWithString($('#time').val());
				var params = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjid'),
				sgintime : sgintime,
				cid :cid,
				gwid:gid
			};
//			console.log(JSON.stringify(params));
			cfnetppPOST(urlhrseesign, params, true, function(data, status) {
//							alert(JSON.stringify(data));
				api.hideProgress();
				if (status == 'success') {//获取网络
					if (data.code == 200) {
						currentClassData = data.json;
						$('#noData').hide();
						$('#noNet').hide();
						var stuNum = parseInt(currentClassData.classspersonnum);
						if (stuNum == 0) {
							$('#noData').show();
							$('#noNet').hide();
							$('#sginchart').hide();
						} else {
							setupChart();
							setupSginDetail();
							setupEmojiChart(currentClassData);
							$('#sginchart').show();
							$('#noData').hide();
							$('#noNet').hide();
						}
					} else {
						$('#noData').show();
						$('#noNet').hide();
						$('#sginchart').hide();
						api.toast({
							msg : '暂无数据',
							duration : 2000,
							location : 'bottom'
						});
					}
				} else {
					$('#noData').hide();
					$('#noNet').show();
					$('#sginchart').hide();
					api.toast({
						msg : '获取失败!请检查网络',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		function setupSginDetail() {
			var sginlist = currentClassData.sginlist;
			if (sginlist != null && sginlist.constructor == Array && sginlist.length > 0) {
				var sginlistHtmlString = '<tr class="th"><td>姓名</td><td>状态</td></tr>';
				for (var i = 0; i < sginlist.length; i++) {
					var sginStudent = sginlist[i];
					sginlistHtmlString += sginCellHtmlString(sginStudent);
				}
				$('#sginDetailList').html(sginlistHtmlString);
			}
		}

		function sginCellHtmlString(sginData) {
			var classStr = sginData.sginstatus == 1 ? 'yqd' : 'wqd';
			var sginStatus = sginData.sginstatus == 1 ? '已签到' : '未签到';
			return '<tr class="' + classStr + '">' + '<td>' + sginData.rename1 + '</td>' + '<td>' + sginStatus + '</td>' + '</tr>';
		}

		function postprogress() {
			api.showProgress({
				style : 'default',
				animationType : 'fade',
				title : '加载中...',
				text : '请稍候...',
				modal : false
			});
		}
	function onSelectCategoryClick(){
		
		$('#classificationId').unbind('click');
		$('#classificationId').click(function(event){
		
			if (categoryIsShow == true) {
				api.setFrameAttr({
				    name: 'CourseCategoryWind',
				    hidden: true
				});
				categoryIsShow = false;
			}else{
				var y = $(".mui-table-view").height()+$("#classificationDivId").height()+86;
		        var h = api.winHeight- y;
				api.openFrame({
				    name: 'CourseCategoryWind',
				    url: 'CourseCategoryWind.html',
				    rect: {
				        x: 0,
				        y: y,
				        w: 'auto',
				        h: h
				    },
				    bounces: false,
				    bgColor:'rgba(0,0,0,.3)'

				});
				api.setFrameAttr({
				    name: 'CourseCategoryWind',
				    hidden: false
				});
				categoryIsShow = true;
//				$(".mui-backdrop").show();
			}
			})
		}
		 function setupNotifi(){

			api.addEventListener({ 
			    name: 'jobCategoryNotifi'
			}, function(ret, err) {
			    cid = ret.value.cId;
			    gid = ret.value.gId;
				var CategoryTitle = ret.value.cTitle;
				var warehouse = ret.value.warehouse;
				if(parseInt(cid) == 0){//全部企业
				$('#classificationId').text("选择: "+"全部");
				}else if(parseInt(gid) == 0){//全部岗位
				$('#classificationId').text("选择: "+warehouse);
				} else{
				  	$('#classificationId').text("选择: "+warehouse+"-"+CategoryTitle);
				}
				categoryIsShow = false;
//				$(".mui-backdrop").hide();;
			   loadClassData();
			});
		}
		
	</script>
</html>
